<template>
  <div>
    <div class="container">
      <div class="search">
        <van-field
          v-model="traceableNumber"
          right-icon="search"
          placeholder="追溯号"

          @clickRightIcon="clickRightIcon"
        />
      </div>

      <div class="card-info">
        <div class="hat">
          <div class="big-title">
            <div class="label">商品名称</div>
            <div class="value">挂钩组件</div>
          </div>
          <div class="midle-title">
            <div class="label">追溯号</div>
            <div class="value">AWQE231512313512131</div>
          </div>
        </div>
        <div class="info">
          <div class="item">
            <div class="label">项目编号</div>
            <div class="value">华飞</div>
          </div>
          <div class="item">
            <div class="label">申购数量</div>
            <div class="value">90套</div>
          </div>
          <div class="item">
            <div class="label">要求到港日期</div>
            <div class="value">2024-5-1</div>
          </div>
          <div class="item">
            <div class="label">申购人</div>
            <div class="value">峰</div>
          </div>
          <div class="item">
            <div class="label">采购业务员</div>
            <div class="value">张三(00001) 17836464793</div>
          </div>
          <div class="item">
            <div class="label">交付经理</div>
            <div class="value">李四(00002) 17836464800</div>
          </div>
        </div>
      </div>


      <div class="logistics-process">
        <div class="title">物流信息</div>
        <van-steps direction="vertical" :active="2" active-color="#266fe8">
          <van-step>
            <div class="van-step__item">
              <div class="van-step__time">
                <span class="time">2023-11-03</span>
              </div>
              <div class="van-step__title">
                <span class="title">需求提交</span>
                <van-icon
                  name="warning-o"
                  color="red"
                  @click="showTipsPicker = true"
                />
              </div>
              <div class="van-step__desc">
                <span>数量</span>&nbsp;&nbsp; <span>90</span>&nbsp;&nbsp;
                <span>单位</span>&nbsp;&nbsp;
                <span>套</span>
              </div>
            </div>
          </van-step>
          <van-step>
            <div class="van-step__item">
              <div class="van-step__time">
                <span class="time">2023-11-03</span>
                <span class="exceed-the-time-limit" @click="showOverdueReminderPicker=true">超期2天</span>
              </div>
              <div class="van-step__title">
                <span class="title">采购完成</span>
              </div>
              <div class="van-step__desc">
                <span>数量</span>&nbsp;&nbsp; <span>90</span>&nbsp;&nbsp;
                <span>单位</span>&nbsp;&nbsp;
                <span>套</span>
              </div>
            </div>
          </van-step>
          <van-step>
            <div class="van-step__item">
              <div class="van-step__time">
                <span class="time">2023-11-03</span>
              </div>
              <div class="van-step__title">
                <span class="title"> 催交/监造中</span>
              </div>
              <div class="van-step__desc">
                <span>数量</span>&nbsp;&nbsp; <span>90</span>&nbsp;&nbsp;
                <span>单位</span>&nbsp;&nbsp;
                <span>套</span>
              </div>
            </div>
          </van-step>
          <van-step>
            <div class="van-step__item">
              <div class="van-step__time">
                <span class="time">2023-11-03</span>
              </div>
              <div class="van-step__title">
                <span class="title">箱单提交</span>
              </div>
              <div class="van-step__desc">
                <span>数量</span>&nbsp;&nbsp; <span>90</span>&nbsp;&nbsp;
                <span>单位</span>&nbsp;&nbsp;
                <span>套</span>
              </div>
            </div>
          </van-step>
          <van-step>
            <div class="van-step__item">
              <div class="van-step__time">
                <span class="time">2023-11-03</span>
              </div>
              <div class="van-step__title">
                <span class="title">检验放行</span>
              </div>
              <div class="van-step__desc">
                <span>数量</span>&nbsp;&nbsp; <span>90</span>&nbsp;&nbsp;
                <span>单位</span>&nbsp;&nbsp;
                <span>套</span>
              </div>
            </div>
          </van-step>
          <van-step>
            <div class="van-step__item">
              <div class="van-step__time">
                <span class="time">2023-11-03</span>
              </div>
              <div class="van-step__title">
                <span class="title">集港通知</span>
              </div>
              <div class="van-step__desc">
                <span>数量</span>&nbsp;&nbsp; <span>90</span>&nbsp;&nbsp;
                <span>单位</span>&nbsp;&nbsp;
                <span>套</span>
              </div>
            </div>
          </van-step>
          <van-step>
            <div class="van-step__item">
              <div class="van-step__time">
                <span class="time">2023-11-03</span>
              </div>
              <div class="van-step__title">
                <span class="title">装车完成</span>
              </div>
              <div class="van-step__desc">
                <span>数量</span>&nbsp;&nbsp; <span>90</span>&nbsp;&nbsp;
                <span>单位</span>&nbsp;&nbsp;
                <span>套</span>
              </div>
            </div>
          </van-step>
          <van-step>
            <div class="van-step__item">
              <div class="van-step__time">
                <span class="time">2023-11-03</span>
              </div>
              <div class="van-step__title">
                <span class="title">货物入库</span>
              </div>
              <div class="van-step__desc">
                <span>数量</span>&nbsp;&nbsp; <span>90</span>&nbsp;&nbsp;
                <span>单位</span>&nbsp;&nbsp;
                <span>套</span>
              </div>
            </div>
          </van-step>
          <van-step>
            <div class="van-step__item">
              <div class="van-step__time">
                <span class="time">2023-11-03</span>
              </div>
              <div class="van-step__title">
                <span class="title">装箱完成</span>
              </div>
              <div class="van-step__desc">
                <span>数量</span>&nbsp;&nbsp; <span>90</span>&nbsp;&nbsp;
                <span>单位</span>&nbsp;&nbsp;
                <span>套</span>
              </div>
            </div>
          </van-step>
        </van-steps>
      </div>
    </div>

    <CommonFloatMenu :columns="menuColumns"></CommonFloatMenu>



    <!-- 提示信息 -->
    <van-popup v-model:show="showTipsPicker" round position="bottom">
      <div class="popup-header">
        <div class="popup-header-title">提示信息</div>
        <van-icon
          class="popup-header-close"
          @click="showTipsPicker = false"
          name="clear"
          color="#AAAAAA"
          size="20"
        />
      </div>

      <div class="popup-content">
        <div class="popup-tips-info" >
          <div>累计发货数量（100.00）已超合同签订数（90.00）</div>
          <div>可能存在拆包等情况，会造成货物无法追踪，敬请悉知！</div>
        </div>
      </div>
    </van-popup>

    <!-- 超期提示 -->
    <van-popup v-model:show="showOverdueReminderPicker" round position="bottom">
      <div class="popup-header">
        <div class="popup-header-title">超期提醒</div>
        <van-icon
          class="popup-header-close"
          @click="showOverdueReminderPicker = false"
          name="clear"
          color="#AAAAAA"
          size="20"
        />
      </div>

      <div class="popup-content">
        <div class="popup-overdue-reminder" >
          <van-cell-group>
            <van-cell title="要求合同签订日期" value="2024-03-01" />
            <van-cell title="合同签订日期" value="2024-03-02" />
            <van-cell title="延期天数" value="1天" />
          </van-cell-group>
        </div>
      </div>
    </van-popup>

    
  </div>
</template>
  
  
  <script>
import { ref } from "vue";
import {
  Toast,
  Step as VanStep,
  Steps as VanSteps,
  Field as VanField,
  CellGroup as VanCellGroup,
  Icon as VanIcon,
  Popup as VanPopup,
  Cell as VanCell,
} from "vant";
import CommonFloatMenu from "@/components/common-float-menu/index.vue";

export default {
  components: {
    VanStep,
    VanSteps,
    CommonFloatMenu,
    VanField,
    VanCellGroup,
    VanIcon,
    VanPopup,
    VanCell,
  },
  name: "CargoTracking",
  setup() {
    const showTipsPicker = ref(false);
    const showOverdueReminderPicker= ref(false);
    const traceableNumber = ref("");
    const menuColumns = ref([
      {
        title: "返回",
        colProps: {
          background: " #2751a6",
        },
        onClick: () => {
          window.history.back();
        },
      },
    ]);

    const clickRightIcon = () => {
      Toast("搜索");
    };

    return {
      showTipsPicker,
      showOverdueReminderPicker,
      traceableNumber,
      clickRightIcon,
      menuColumns,
    };
  },
};
</script>
  
  
  <style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  .search {
    padding: 8px 20px;
    /deep/ .van-cell {
      border: 1px solid #e9e9e9;
      border-radius: 8px;
    }
  }
  .card-info {
    box-shadow: 0 1px 8px 0 #ebedf0;
    width: calc(100% - 30px);
    margin: 15px auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    .hat {
      padding: 10px 15px 12px;
      box-shadow: 0 1px 8px 0 #ebedf0;
      color: white;
      border-radius: 15px;
      background: linear-gradient(#193bc1, #198ed1) 100% 100%;
      .big-title {
        font-size: 18px;
        font-weight: 600;
        line-height: 45px;
      }
      .midle-title {
        font-size: 16px;
        font-weight: 600;
        line-height: 32px;
      }
    }
    .big-title,
    .midle-title,
    .info .item {
      display: flex;
      justify-content: space-between;
    }
    .info {
      padding: 15px 0px;
      .item {
        font-size: 13px;
        color: #bdbdbd;
        padding: 5px 15px 5px;
      }
    }
  }
  .logistics-process {
    padding-left: 22px;
    flex: 1;
    .title {
      font-size: 16px;
      margin-bottom: 10px;
      font-size: #000000;
      font-weight: 600;
    }
    .van-step__item {
      padding-left: 15px;
    }
    .van-step__time {
      font-size: 15px;
      margin-bottom: 10px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .time {
        line-height: 24px;
        vertical-align: middle;
        height: 24px;
      }
      .exceed-the-time-limit {
        align-items: center;
        left: 100px;
        padding: 6px 18px 6px 18px;
        background: #fdf1f2;
        color: #f92c2c;
        text-align: center;
        font-size: 13px;
        transform: scale(0.7);
      }
    }
    .van-step__title {
      margin-bottom: 12px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      & > .title {
        font-size: 15px;
        margin-bottom: unset;
        margin-right: 10px;
      }
    }
    .van-step__desc {
      min-height: 30px;
      font-color: #848484;
    }
    .van-step__desc > div {
      line-height: 20px;
      font-size: 13px;
    }
  }
}

.popup-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  .popup-header-title {
    font-size: 16px;
    font-weight: 600;
    height: 30px;
    line-height: 30px;
  }
  .popup-header-close {
    padding-top: 5px;
  }
}
.popup-content {
  padding: 5px 0px 20px;
  min-height: 150px;
  .popup-tips-info {
    padding: 0px 15px;
    padding-top: 20px;
    font-size: 13px;
    color: #808080;
    & > div {
      line-height: 28px;
      margin-bottom: 20px;
    }
  }
}
</style>